<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生学习进度详情 - AI教学辅助系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/common.css" rel="stylesheet">
    <link href="css/admin.css" rel="stylesheet">
    <style>
        .subject-progress-item {
            margin-bottom: 15px;
        }
        .subject-name {
            font-weight: 600;
            margin-bottom: 5px;
        }
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .stats-item {
            flex: 1;
            text-align: center;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            padding: 10px;
            min-width: 100px;
        }
        .stats-value {
            font-size: 24px;
            font-weight: 700;
            color: #2c7be5;
        }
        .stats-label {
            font-size: 14px;
            color: #666;
        }
        .knowledge-point-item {
            margin-bottom: 12px;
        }
        .kp-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .kp-subject {
            color: #666;
            font-size: 14px;
        }
        .kp-name {
            font-weight: 600;
        }
        .progress {
            height: 15px;
        }
        
        .action-buttons {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container my-4">
        <!-- 消息提示区 -->
        <div id="message-container"></div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button id="btn-back" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> 返回</button>
        </div>
        
        <!-- 学生信息卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-id-card"></i> 学生信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="info-item">
                            <div class="info-label">学号</div>
                            <div class="info-value" id="student-id">-</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-item">
                            <div class="info-label">姓名</div>
                            <div class="info-value" id="student-name">-</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-item">
                            <div class="info-label">班级</div>
                            <div class="info-value" id="student-class">-</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-item">
                            <div class="info-label">年级</div>
                            <div class="info-value" id="student-grade">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 学习进度卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-chart-bar"></i> 学习进度</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <h6>学科完成进度</h6>
                        <div id="subject-progress"></div>
                    </div>
                    <div class="col-md-4">
                        <h6>练习统计</h6>
                        <div class="stats-container">
                            <div class="stats-item">
                                <div class="stats-value" id="total-sessions">0</div>
                                <div class="stats-label">练习次数</div>
                            </div>
                            <div class="stats-item">
                                <div class="stats-value" id="total-exercises">0</div>
                                <div class="stats-label">累计习题</div>
                            </div>
                            <div class="stats-item">
                                <div class="stats-value" id="correct-rate">0%</div>
                                <div class="stats-label">正确率</div>
                            </div>
                            <div class="stats-item">
                                <div class="stats-value" id="total-time">0分钟</div>
                                <div class="stats-label">总时长</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <hr>
                
                <h6>知识点掌握情况</h6>
                <div id="knowledge-points"></div>
            </div>
        </div>
        
        <!-- 学习建议卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-lightbulb"></i> 学习建议</h5>
            </div>
            <div class="card-body">
                <div id="learning-suggestions">
                    <div class="alert alert-info">
                        系统将根据学生的学习情况自动生成个性化学习建议
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义脚本 -->
    <script src="js/admin-student-progress.js"></script>
</body>
</html> 